<!--
 * @Author: your name
 * @Date: 2021-01-11 11:14:26
 * @LastEditTime: 2021-03-02 14:15:02
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \element_vue3.0\src\views\Login.vue
-->
<template>
    <common
        ><div class="ve_container">
            <el-card>
                <h1>VE-Admin</h1>
                <transition name="el-fade-in-linear">
                    <el-form
                        :model="form"
                        :rules="rules"
                        v-show="!success"
                        class="ve_form"
                        ref="ref_form"
                        :inline="false"
                        @keyup.enter="onSubmit"
                    >
                        <el-form-item prop="userName">
                            <el-input
                                v-model.trim="userName"
                                placeholder="用户名"
                            ></el-input>
                        </el-form-item>
                        <el-form-item prop="pwd">
                            <el-input
                                v-model.trim="pwd"
                                show-password
                                placeholder="密码"
                            ></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button
                                class="ve_submit"
                                type="primary"
                                @click="onSubmit"
                                >登录</el-button
                            >
                        </el-form-item>
                    </el-form>
                </transition>
            </el-card>
        </div></common
    >
</template>

<script>
import Common from "@/components/Common";
import { ref, reactive, toRefs } from "vue";
import { useStore } from "vuex";
import { useRouter } from "vue-router";
const rules = {
    userName: [{ required: true, message: "请输入用户名", trigger: "blur" }],
    pwd: [{ required: true, message: "请输入密码", trigger: "blur" }]
};
export default {
    name: "Login",
    components: { Common },
    setup() {
        const store = useStore();
        const router = useRouter();
        const form = reactive({
            userName: "Administrator",
            pwd: "123456"
        });
        const { userName, pwd } = toRefs(form);
        const ref_form = ref(null);
        const success = ref(false);
        sessionStorage.clear();
        store.dispatch("app/set_token", "");
        router.options.isAddDynamicMenuRoutes = false;

        const onSubmit = () => {
            ref_form.value.validate(async valid => {
                if (valid) {
                    const data = await VE_API.user.login(form);
                    if (data.code === "00") {
                        const { token, uname } = data;
                        store.dispatch("app/set_token", token);
                        store.dispatch("app/set_uname", uname);
                        success.value = true;
                        router.push({ name: "AppMain" });
                    }
                } else {
                    return;
                }
            });
        };
        return {
            success,
            form,
            ref_form,
            userName,
            pwd,
            rules,
            onSubmit
        };
    }
};
</script>

<style lang="scss" scoped>
.ve_container {
    position: absolute;
    width: 400px;
    top: 50%;
    left: 100px;
    transform: translateY(-50%);
    min-height: 273px;
    text-align: center;
    h1 {
        font-size: 36px;
        -webkit-transition-duration: 1s;
        transition-duration: 1s;
        -webkit-transition-timing-function: ease-in-put;
        transition-timing-function: ease-in-put;
        font-weight: 400;
    }
    .ve_form {
        .ve_submit {
            width: 100%;
        }
    }
}
</style>
